<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>云币明细</title>
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		
		<style type="text/css">
			*{
				margin: 0rem;
				padding: 0rem;
				text-decoration: none;
				list-style: none;
				
			}
			html,body{
				background-color: #fff;
				width: 100%;
				height: 100%;
				 /*font-size:  100rem;*/
				 font-size: calc(100vw / 7.5);
				 font-family: "microsoft yahei";
			}
			.wrapper .header{
			position: fixed;
			top:0rem;
			left: 0rem;
			box-sizing: border-box;
			padding: 0rem 0.1rem;
			display: flex;
			width: 100% ;
			height: 0.88rem;
			background: #809fba;
		}	
			#wrapper{
				height: 0.88rem;
			}
			.content{
				box-sizing: border-box;
				padding: 0rem 0.32rem;
			}
			.content .wrapper-title{
				display: flex;
				justify-content: space-between;
				width: 100%;
				height: 0.91rem;
				font-size: 0.27rem;
			}
			.content .wrapper-title li{
				width: 1.09rem;
				height: 0.91rem;
				line-height: 0.91rem;
				text-align: center;
				color: #7393b0;
			}
			.content .wrapper-title .active{
				font-size: 0.31rem;
				color: #111111;
				font-weight: bold;
				border-bottom: 1px solid #000;
			}
			
			.content .wrapper-main {
				width: 100%;
			}
			.content .wrapper-main .item{
				display: flex;
				width: 100%;
				margin-top: 0.25rem;
				border-bottom: 1px solid #e6eafa;
			}
			.content .wrapper-main .item .left{
				flex: 1.8;
				text-align: left;
			}
			.content .wrapper-main .item .right{
				flex: 1;
				text-align: right;
			}
			.content .wrapper-main .item .left li{
				height: 0.47rem;
				line-height: 0.47rem;
				font-size: 0.23rem;
				color: #7393b0;
			}
			.content .wrapper-main .item .left li:nth-of-type(1){
				height: 0.8rem;
				line-height: 0.8rem;
				font-size: 0.23rem;
				color: #111;
			}
			.content .wrapper-main .item .right li{
				height: 0.5rem;
				font-size: 0.21rem;
				color: #7393b0;
			}
			.content .wrapper-main .item .right li:nth-of-type(1){
				margin-top:0.7rem;
			}
			.content .wrapper-main .item .right li:nth-of-type(3){
				height: 0.5rem;
				line-height: 0.5rem;
			}
			.maichu , .qita{
				display: none;
			}
			
			</style>
		<script src="../js/jquery.min.js"></script>
	</head>

	<body>
		<script>
			$(function(){
				$("#wrapper").load("../header.html")
				
			})
			setTimeout(function(){
				$("#wrapper").find(".con").html("云币明细");
				$(".arrow").on("tap",function(){
				window.location.href = "index.html";
			})
			},200)
			setTimeout(function(){
				$("#wrapper").find(".con").html("云币明细");
				$(".arrow").on("tap",function(){
				window.location.href = "index.html";
			})
			},2000)
		</script>
		<div class="wrapper" id="wrapper"></div>

		<!--内容-->
		<div class="content">
			<ul class = "wrapper-title">
				<li class= "active" id="mairu" type="2" >买入</li>
				<li id="maichu" type = "1">卖出</li>
				<li id="qita" type = "3">其他</li>
			</ul>
			
			<div class="wrapper-main mairu">
				<!-- <div class="item">
					<ul class="left">
						<li>
							<span>订单号：</span>
							<span class="info">2366</span>
						</li>
						<li>
							<span>买家ID：</span>
							<span class="info">2653</span>
						</li>
						<li>
							<span>卖家ID：</span>
							<span class="info">265623</span>
						</li>
					</ul>
					<ul class="right">
						<li>
							<span>交易金额：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span>交易数量：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span class="info">2018-5-21 15:30</span>
						</li>
					</ul>
				</div>
				<div class="item">
					<ul class="left">
						<li>
							<span>订单号：</span>
							<span class="info">2366</span>
						</li>
						<li>
							<span>买家ID：</span>
							<span class="info">2653</span>
						</li>
						<li>
							<span>卖家ID：</span>
							<span class="info">265623</span>
						</li>
					</ul>
					<ul class="right">
						<li>
							<span>交易金额：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span>交易数量：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span class="info">2018-5-21 15:30</span>
						</li>
					</ul>
				</div>
				<div class="item">
					<ul class="left">
						<li>
							<span>订单号：</span>
							<span class="info">2366</span>
						</li>
						<li>
							<span>买家ID：</span>
							<span class="info">2653</span>
						</li>
						<li>
							<span>卖家ID：</span>
							<span class="info">265623</span>
						</li>
					</ul>
					<ul class="right">
						<li>
							<span>交易金额：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span>交易数量：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span class="info">2018-5-21 15:30</span>
						</li>
					</ul>
				</div> -->
			</div>
			<!-- <div class="wrapper-main maichu">
				<div class="item">
					<ul class="left">
						<li>
							<span>订单号：</span>
							<span class="info">2366</span>
						</li>
						<li>
							<span>买家ID：</span>
							<span class="info">2653</span>
						</li>
						<li>
							<span>卖家ID：</span>
							<span class="info">265623</span>
						</li>
					</ul>
					<ul class="right">
						<li>
							<span>交易金额：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span>交易数量：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span class="info">2018-5-21 15:30</span>
						</li>
					</ul>
				</div>
				<div class="item">
					<ul class="left">
						<li>
							<span>订单号：</span>
							<span class="info">2366</span>
						</li>
						<li>
							<span>买家ID：</span>
							<span class="info">2653</span>
						</li>
						<li>
							<span>卖家ID：</span>
							<span class="info">265623</span>
						</li>
					</ul>
					<ul class="right">
						<li>
							<span>交易金额：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span>交易数量：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span class="info">2018-5-21 15:30</span>
						</li>
					</ul>
				</div>
				<div class="item">
					<ul class="left">
						<li>
							<span>订单号：</span>
							<span class="info">2366</span>
						</li>
						<li>
							<span>买家ID：</span>
							<span class="info">2653</span>
						</li>
						<li>
							<span>卖家ID：</span>
							<span class="info">265623</span>
						</li>
					</ul>
					<ul class="right">
						<li>
							<span>交易金额：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span>交易数量：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span class="info">2018-5-21 15:30</span>
						</li>
					</ul>
				</div>
			</div>
			<div class="wrapper-main qita">
				<div class="item">
					<ul class="left">
						<li>
							<span>订单号：</span>
							<span class="info">2366</span>
						</li>
						<li>
							<span>买家ID：</span>
							<span class="info">2653</span>
						</li>
						<li>
							<span>卖家ID：</span>
							<span class="info">265623</span>
						</li>
					</ul>
					<ul class="right">
						<li>
							<span>交易金额：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span>交易数量：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span class="info">2018-5-21 15:30</span>
						</li>
					</ul>
				</div>
				<div class="item">
					<ul class="left">
						<li>
							<span>订单号：</span>
							<span class="info">2366</span>
						</li>
						<li>
							<span>买家ID：</span>
							<span class="info">2653</span>
						</li>
						<li>
							<span>卖家ID：</span>
							<span class="info">265623</span>
						</li>
					</ul>
					<ul class="right">
						<li>
							<span>交易金额：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span>交易数量：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span class="info">2018-5-21 15:30</span>
						</li>
					</ul>
				</div>
				<div class="item">
					<ul class="left">
						<li>
							<span>订单号：</span>
							<span class="info">2366</span>
						</li>
						<li>
							<span>买家ID：</span>
							<span class="info">2653</span>
						</li>
						<li>
							<span>卖家ID：</span>
							<span class="info">265623</span>
						</li>
					</ul>
					<ul class="right">
						<li>
							<span>交易金额：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span>交易数量：</span>
							<span class="info">30</span>
						</li>
						<li>
							<span class="info">2018-5-21 15:30</span>
						</li>
					</ul>
				</div>
			</div> -->
		</div>
	
	
	
		
		<script src="../js/mui.min.js"></script>
		<script>
			var type = 2;
			changeContent(type);

			$(".wrapper-title").on("tap","li",function(){
				$(".wrapper-title").find(".active").removeClass("active");
				$(this).addClass("active");
				type = $(this).attr("type");
				
				changeContent(type);

			})

			function changeContent(type){
				$(".wrapper-main").html("")
				$.ajax({
					type: "GET",
					url: `${localStorage.top}api/record/coin_record_list?TOKEN=${localStorage.token}&type=${type}`,
					success: successed
				})
			}
			function successed(data){
				var data = data.data;
				var str="";
				if(type == 3){
					for(var i = 0; i<data.length; i++){
					str +=`<div class="item" style="padding-bottom: 0.4rem">
								<ul class="left">
									<li>
										<span>标题：</span>
										<span class="info">${data[i].detail}</span>
									</li>
									<li>
										<span>来源ID：</span>
										<span class="info">${data[i].invite_code}</span>
									</li>
									
								</ul>
								<ul class="right">
									<li style="margin-top:0.2rem">
										<span>数量：</span>
										<span class="info">${data[i].coin}</span>
									</li>
									<li>
										<span>时间：</span>
										<span class="info">${data[i].time}</span>
									</li>
									
								</ul>
							</div>`
				}
				}else{
					for(var i = 0; i<data.length; i++){
					str +=`<div class="item">
					<ul class="left">
						<li>
							<span>订单号：</span>
							<span class="info">${data[i].order_id}</span>
						</li>
						<li>
							<span>买家ID：</span>
							<span class="info">${data[i].owner_id}</span>
						</li>
						<li>
							<span>卖家ID：</span>
							<span class="info">${data[i].owner_id}</span>
						</li>
					</ul>
					<ul class="right">
						<li>
							<span>交易金额：</span>
							<span class="info">${data[i].cash}</span>
						</li>
						<li>
							<span>交易数量：</span>
							<span class="info">${data[i].coin}</span>
						</li>
						<li>
							<span class="info">${data[i].time_text}</span>
						</li>
					</ul>
				</div>`
				}
				console.log("zouwan")
				}
				$(".wrapper-main").html(str)
			}
		</script>
	</body>

</html>